<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { CircleCloseFilled, Plus } from '@element-plus/icons-vue'
import type { IaddGoods } from '../../types/good'
import { imgBaseURL,apiBaseURL } from '@/api/baseURL'
import http from '../../api/http'
import type { ISpec } from '@/types/Spec'
import type { IgoodType } from '@/types/GoodsType'
import { storeToRefs } from 'pinia'
import store from '../../store/index'
const { addCart } = store()
const num =ref(1)
const hh=ref('')
const hh1=ref("")
const pl=ref('')
const types: IgoodType[] = reactive([])
const specs: ISpec[] = reactive([])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<IaddGoods>({
    "gid":0,
    "name": "奈雪早餐",
    "content": "购买三明治,享早餐指定饮品半价",
    "images": "/static/picture/goods/fda6dd99c83af02353.jpg",
    "use_Spec": false,
    "use_Property":true,
    "unit": "件",
    "price": 18.5,
    "sales": 0,
    "sort": 0,
    "gtid": 1,
    "on_sale": true,
    "typeName": "奈雪早餐",
    goodPropertyKey: [
       

    ]
})


var bbb=ref(0)
//#endregion



//#region  父子组件之间双向绑定数据 数据传递
// 父子组件之间双向绑定数据 数据传递
const dialogVisible = defineModel<boolean>({required:true})
const emit = defineEmits<{ (e: 'refresh'): void }>()
const props = defineProps<{ formData: IaddGoods }>()
//监听key 的改变 并查询数据
watch(() => props.formData, (value:IaddGoods ) => {
    //切断数据关联
    let data: IaddGoods = JSON.parse(JSON.stringify(value))
 console.log("value",data)
    //form 赋值
    ruleForm.gid = data.gid;
    ruleForm.gtid = data.gtid;
    ruleForm.name = data.name;;
    ruleForm.images = data.images;
    ruleForm.use_Property = data.use_Property;
     ruleForm.use_Spec = data.use_Spec;
      ruleForm.on_sale = data.on_sale;
       ruleForm.unit = data.unit;
        ruleForm.price = data.price;
         ruleForm.sales = data.sales;
         ruleForm.sort = data.sort;
      ruleForm.goodPropertyKey=data.goodPropertyKey
      ruleForm.content=data.content
       ruleForm.number=1
       hh.value=""
       hh1.value=""
       pl.value=""
    //ruleForm = data
    //console.log('ruleForm: ', ruleForm)

})
watch(hh,(new1,old1)=>{
if(new1=="1.0kg"){
bbb.value=10

}else if(new1=="2.5kg"){

bbb.value=20
}else if(new1=="8.5kg"){

 bbb.value=60
}else if(new1=="5.5kg"){
 bbb.value=45

}else if(new1=="1.5kg"){
bbb.value=10

}

})

onMounted(() => {

    http.get<ISpec[]>('Spec')
        .then(res => {
            specs.push(...res.data)
        })
        .catch(err => {
            console.log('err: ', err);
        })

    http.get<IgoodType[]>('GoodsType')
        .then(res => {
            types.push(...res.data)
        })
        .catch(err => {
            console.log('err: ', err);
        })
})

const op =()=>{

    ruleForm.Pl=pl.value+","+hh.value+","+hh1.value
    ruleForm.number=num.value
     if(pl.value!=""||hh.value!=""||hh1.value!=""){
          ruleForm.Sfpl=true
        }else{
         ruleForm.Sfpl=false
        }
       
       
console.log("购物",ruleForm)
          addCart(ruleForm);
          
                    dialogVisible.value = false
                    emit('refresh')
 hh.value=""
       hh1.value=""
       pl.value=""
}
    
</script>

<template>

    <el-dialog v-model="dialogVisible" :show-close="false" width="500" center>
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass"></h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    关闭
                </el-button>
            </div>
        </template>
         <div style="margin-top:10px;display:flex;justify-content: center;">
   <img v-if="ruleForm.images" :src="imgBaseURL+ruleForm.images" class="avatar">
 </div>
  <div style="margin-top:10px">
     <h2>{{ruleForm.name}}</h2>
    </div>
     <div style="margin-top:10px">
     <h2>{{ruleForm.content}}</h2>
    </div>
    <el-card class="box-card" v-for="(item,index) in ruleForm.goodPropertyKey" :key="index" >
 {{ item.name }}
 <div>
  
 <!-- <el-button v-for="(kk,index) in item.GoodPropertyValue" :key="index" @click="r(kk.Value)">{{kk.Value}}</el-button> -->
   <el-radio-group size="small" v-model="pl">
      <el-radio-button :label="kk.value" :value="kk.value" v-for="(kk,index) in item.name=='食品口味'? item.goodPropertyValue:'' " :key="index"  ></el-radio-button>
    </el-radio-group>
     <el-radio-group size="small" v-model="hh">  <el-radio-button :label="kk.value" :value="kk.value" v-for="(kk,index) in item.name=='净含量'? item.goodPropertyValue:'' " :key="index"  ></el-radio-button></el-radio-group>
     <el-radio-group size="small" v-model="hh1">  <el-radio-button :label="kk.value" :value="kk.value" v-for="(kk,index) in item.name=='肉类'? item.goodPropertyValue:'' " :key="index"  ></el-radio-button></el-radio-group>
      
</div>
    </el-card>
    <el-card class="box-card"   >
  <span style="font-size:18px">￥{{ (ruleForm.price+bbb)*num  }}</span>  <div style="display:inline-block;margin-left:200px" > <el-input-number v-model="num" :min="1" :max="50" ></el-input-number></div>
  <div>{{ pl }}  {{ hh}}  {{ hh1 }}</div>
 </el-card>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="op">加入购物车</el-button>
    </div>

      
    </el-dialog>

</template>


<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.pp{
  background-color: antiquewhite;
}
 .box-card {
    width: 470px;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>